<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" class="inp"/>
    <div class="center">
      <ul class="left">
        <li><a href="#img-top1">明星同款</a></li>
        <li><a href="#img-top2">NEW新品</a></li>
        <li><a href="#img-top3">HOT热销星品</a></li>
        <li><a href="#img-top4">出色唇妆</a></li>
        <li><a href="#img-top5">魅惑眼妆</a></li>
        <li><a href="#img-top6">甄选打底</a></li>
        <li><a href="#img-top7">精致底妆</a></li>
        <li><a href="#img-top8">出色唇妆</a></li>
        <slot><li>全部商品</li></slot>
      </ul>
      <div class="right">
        <div class="tupian" v-for="(v, i) in arr" :key="i">
          <img :src="v.img" alt="" class="img-top" id="img-top1" />
          <div>
            <p>{{ v.list }}</p>
            <ol>
              <li v-for="(v, i) in arra" :key="i">
                <img :src="v.img" class="img-list" />
              </li>
              <!-- <li><img src="@/assets/logo.png" class="img-list" /></li>
              <li><img src="@/assets/logo.png" class="img-list" /></li> -->
            </ol>
          </div>
        </div>
     
      </div>
    </div>
    <Zong />
  </div>
</template>

<script>
import Zong from "@/components/zong.vue";
import getlink from "@/apis/getapi.js";
export default {
  components: { Zong },
  data() {
    return {
      arr: "",
    };
  },
  computed: {
    arra() {
      return this.arr.slice(0, 6);
    },
    arrb() {
      return this.arr.slice(0, 6);
    },
  },
  mounted() {
    getlink("/data/list/lists").then((ok) => {
      console.log(ok.data.data);
      this.arr = ok.data.data;
    });
  },
};
</script>

<style scoped>
.inp{
   position: fixed;
   margin:0 0 .55rem .75rem;
   width: 100%;
}
.center {
  display: flex;
}
.left {
  width: 0.75rem;
  background-color: rgb(240, 239, 239);
  position: fixed;
  height: 100%;
 
}
.right {
  padding: 0 0.1rem;
  width: 2.4rem ;
   margin:.55rem .8rem;

}
#zong {
  position: fixed;
  bottom: 0;
}
.left li {
  /* height: 0.4rem; */
  line-height: 0.4rem;
  width: 0.75rem;
  color: rgb(87, 85, 85);
  text-align: center;
  font-size: 0.14rem;
}

.left li:hover {
  color: black;
  background-color: white;
  font-weight: 600;
}
.img-top {
  width: 2.35rem;
  height: 0.85rem;
}
.img-list {
  width: 0.7rem;
  height: 0.7rem;
  /* margin-right: .1rem; */
}
.tupian p {
  line-height: 0.3rem;
  font-size: 0.16rem;
  font-weight: 600;
}
.tupian ol {
  display: flex;
  justify-content: space-evenly;
  flex-shrink: 0;
  flex-wrap: wrap;
}
</style>